<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <link rel="stylesheet" href="http://jigsaw.test/css/main.css">
    </head>
    <body class="border-t-3 border-primary full-height">

        <nav class="navbar navbar-brand">
            <div class="container">
                <div class="navbar-content">
                    <div>
                        <a class="link-plain text-xxl flex-y-center" href="http://jigsaw.test">
                            <strong>Jigsaw Collections Demo</strong>
                        </a>
                    </div>
                </div>
            </div>
        </nav>

        <div class="container m-xs-b-6">
            <div class="row">

                <div class="col-xs-4">
                    <nav class="nav-list">
    <a class="nav-list-item " href="http://jigsaw.test/posts">
        <icon></icon>Posts
    </a>

    <a class="nav-list-item " href="http://jigsaw.test/pagination">
        <icon></icon>Pagination
    </a>

    <a class="nav-list-item " href="http://jigsaw.test/categories/news">
        <icon></icon>Categories
    </a>

    <a class="nav-list-item selected" href="http://jigsaw.test/people">
        <icon></icon>People
    </a>

    <a class="nav-list-item " href="http://jigsaw.test/variables">
        <icon></icon>Variables
    </a>

    <a class="nav-list-item " href="http://jigsaw.test/json-test.json">
        <icon></icon>JSON
    </a>

    <a class="nav-list-item " href="http://jigsaw.test/text-test.txt">
        <icon></icon>Text
    </a>
</nav>
                    <div class="panel m-xs-t-6">
    <div class="panel-heading">
        <h4 class="text-sm wt-light text-uppercase text-brand">Page meta</h4>
    </div>

    <div class="panel-body">
        <div class="p-xs-b-4 border-b">
            <p class="text-xs text-dark-soft text-uppercase">Filename:</p>
            <p class="p-xs-l-2 text-sm">people</p>
        </div>

        <div class="p-xs-y-4 border-b">
            <p class="text-xs text-dark-soft text-uppercase">Extension:</p>
            <p class="p-xs-l-2 text-sm">blade.php</p>
        </div>

        <div class="p-xs-y-4 border-b">
            <p class="text-xs text-dark-soft text-uppercase">Path:</p>
            <p class="p-xs-l-2 text-sm">/people/</p>
        </div>

        <div class="p-xs-y-4 border-b">
            <p class="text-xs text-dark-soft text-uppercase">Base URL:</p>
            <p class="p-xs-l-2 text-sm">http://jigsaw.test</p>
        </div>

        <div class="p-xs-y-4 border-b">
            <p class="text-xs text-dark-soft text-uppercase">URL:</p>
            <p class="p-xs-l-2 text-sm">http://jigsaw.test/people/</p>
        </div>

        <div class="p-xs-t-4">
            <p class="text-xs text-dark-soft text-uppercase">Global Variable:</p>
            <p class="p-xs-l-2 text-sm">some global variable</p>
        </div>
    </div>
</div>
                                    </div>

                <div class="col-xs-8 demo-page">
                    <h2>People</h2>

<div class="panel p-xs-4 m-xs-y-4">
    <h4>Demonstrates:</h4>
    <ul>
        <li>Using collections without templates</li>
        <li>Defining multiple URL paths ('web' and 'api' in this example) in <code>collections.php</code></li>
        <li>Building a simple API that returns JSON</li>
    </ul>
</div>

<div class="row">
    <div class="col-xs-12">

                <div class="p-xs-y-4 border-b">
            <h3>
                662

                                    <a href="http://jigsaw.test/people/web/2016-05-16/adam_wathan/">Adam Wathan</a>
                            </h3>

            <p>Filename (meta): adam-wathan</p>

                        <p>Path (WEB): <a href="http://jigsaw.test/people/web/2016-05-16/adam_wathan/">/people/web/2016-05-16/adam_wathan/</a></p>
            <p>Path (API): <a href="http://jigsaw.test/people/api.test/Adam Wathan/2016-05-16/adam-wathan.js">/people/api.test/Adam Wathan/2016-05-16/adam-wathan.js</a></p>
            <p>Path (Test): <a href="http://jigsaw.test/people/test/adam-wathan/">/people/test/adam-wathan/</a></p>
            
            <p>Role (frontmatter): Developer</p>
            <p>Using global helper function: Adam&#039;s biography:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, placeat saepe, </p>
        </div>
                <div class="p-xs-y-4 border-b">
            <h3>
                1

                                    <a href="http://jigsaw.test/people/web/2016-02-01/dan_sheetz/">Dan Sheetz</a>
                            </h3>

            <p>Filename (meta): dan-sheetz</p>

                        <p>Path (WEB): <a href="http://jigsaw.test/people/web/2016-02-01/dan_sheetz/">/people/web/2016-02-01/dan_sheetz/</a></p>
            <p>Path (API): <a href="http://jigsaw.test/people/api.test/Dan Sheetz/2016-02-01/dan-sheetz.js">/people/api.test/Dan Sheetz/2016-02-01/dan-sheetz.js</a></p>
            <p>Path (Test): <a href=""></a></p>
            
            <p>Role (frontmatter): CEO</p>
            <p>Using global helper function: Dan&#039;s biography:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, placeat saepe, v</p>
        </div>
                <div class="p-xs-y-4 border-b">
            <h3>
                123

                                    Dave Hicking
                            </h3>

            <p>Filename (meta): dave-hicking</p>

            
            <p>Role (frontmatter): Director of Operations</p>
            <p>Using global helper function: Dave&#039;s biography:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, placeat saepe, </p>
        </div>
                <div class="p-xs-y-4 border-b">
            <h3>
                12

                                    <a href="http://jigsaw.test/people/web/2016-03-01/keith_damiani/">Keith Damiani</a>
                            </h3>

            <p>Filename (meta): keith-damiani</p>

                        <p>Path (WEB): <a href="http://jigsaw.test/people/web/2016-03-01/keith_damiani/">/people/web/2016-03-01/keith_damiani/</a></p>
            <p>Path (API): <a href=""></a></p>
            <p>Path (Test): <a href=""></a></p>
            
            <p>Role (frontmatter): Developer</p>
            <p>Using global helper function: Keith&#039;s biography:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, placeat saepe,</p>
        </div>
                <div class="p-xs-y-4 border-b">
            <h3>
                2001

                                    <a href="http://jigsaw.test/people/web/2016-04-01/matt_stauffer/">Matt Stauffer</a>
                            </h3>

            <p>Filename (meta): matt-stauffer</p>

                        <p>Path (WEB): <a href="http://jigsaw.test/people/web/2016-04-01/matt_stauffer/">/people/web/2016-04-01/matt_stauffer/</a></p>
            <p>Path (API): <a href=""></a></p>
            <p>Path (Test): <a href=""></a></p>
            
            <p>Role (frontmatter): CTO</p>
            <p>Using global helper function: Biography:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat, placeat saepe, volupta</p>
        </div>
        
    </div>
</div>

<div class="row p-xs-y-8">
    <div class="col-xs-6">
        <blockquote>Can reference as an Illuminate Collection, e.g. for sorting:</blockquote>

                    <h3>Dan Sheetz (1)</h3>
                    <h3>Keith Damiani (12)</h3>
                    <h3>Dave Hicking (123)</h3>
                    <h3>Adam Wathan (662)</h3>
                    <h3>Matt Stauffer (2001)</h3>
        
    </div>
    <div class="col-xs-6">
        <blockquote>Can reference collection-specific helper functions when sorting:</blockquote>

                    <h3>Matt Stauffer (4002)</h3>
                    <h3>Adam Wathan (1324)</h3>
                    <h3>Dave Hicking (246)</h3>
                    <h3>Keith Damiani (24)</h3>
                    <h3>Dan Sheetz (2)</h3>
        
    </div>
</div>
                </div>
            </div>
        </div>
    </body>
</html>
<!DOCTYPE html>
